vue组件slot 插槽有哪些,如何使用?

标签:2024-05-18 11:13:33

slot 插槽,可以理解为slot在组件模板中提前占据了位置。当复用组件时,使用相关的slot标签时,标签里的内容就会自动替换组件模板中对应slot标签的位置,作为承载分发内容的出口。

主要作用是复用和扩展组件,做一些定制化组件的处理。

插槽主要有3种

默认插槽

// 子组件
<template>
<slot>
  <div>默认插槽备选内容</div>
</slot>
</template>
// 父组件
<template>
<Child>
  <div>替换默认插槽内容</div>
</Child>
</template>

具名插槽

slot 标签没有name属性,则为默认插槽。具备name属性,则为具名插槽

// 子组件
<template>
  <slot>默认插槽的位置</slot>
  <slot name="content">插槽content内容</slot>
</template>
// 父组件
<template>
   <Child>
     <template v-slot:default>
       默认...
     </template>
     <template v-slot:content>
       内容...
     </template>
   </Child>
</template>

作用域插槽

子组件在作用域上绑定的属性来将组件的信息传给父组件使用,这些属性会被挂在父组件接受的对象上。

// 子组件
<template>
<slot name="footer" childProps="子组件">
  作用域插槽内容
</slot>
</template>
// 父组件
<template>
<Child v-slot="slotProps">
  {{ slotProps.childProps }}
</Child>
</template>
原文出处:http://www.dongblog.com/notes/77.html
来源:博客网 转载请注明出处!

活跃用户

PIKACHU-WXWZ
Ta还没有签名
明月清风
Ta还没有签名
self-motivated
Ta还没有签名
草&根
Ta还没有签名

友情链接


Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093

Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093